<!--巡查点上报内容-->
<template>
	<page-meta :page-font-size="baseFontSize + 'rpx'" :root-font-size="baseFontSize + 'rpx'"></page-meta>
	<view class="u-page flex flex-direction">
		<view class="list-item u-flex-y-center">
			<!-- <view class="date">最近一次巡查时间{{ timeTranfer(detailObj.updateTime) }}</view> -->
			<view class="item">
				<view class="flex justify-between align-center">
					<text class="name">{{ taskName }}</text>
				</view>
				<view class="flex justify-between align-center">
					<view class="time">
						巡查状态汇总
						<!-- ~18:34:45 -->
					</view>
					<view class="count flex align-center">
						<view class="icon icon2">已巡</view>
						<view class="num">{{ detailObj.totalNum }}</view>
						<view class="icon icon1">正常</view>
						<view class="num text-blue">{{ detailObj.normalNum }}</view>
						<view class="icon icon3">异常</view>
						<view class="num">{{ detailObj.abnormalNum }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bd"></view>
		<scroll-view scroll-y="true" class="flex-sub main">
			<view class="list">
				<view class="xc-item" v-for="(item, index) in detailObj.patrolTaskReportRespVO" v-if="item.reportState !== -1" :key="item.id">
					<view class="cx-item-hd flex align-center" @click="handleShow(item)">
						<view class="icon">{{ !item.isShow ? '-' : '+' }}</view>
						<view class="name flex-sub">巡查点:{{ item.patrolPointName }}</view>
						<view class="state" :class="{ 'state-red': item.reportState === 1 }">{{ timeTranfer(item.updateTime) }} {{ item.reportState === 1 ? '异常' : '正常' }}</view>
					</view>
					<view v-if="!item.isShow">
						<view class="cx-item-bd" v-if="item.reportState === 0">
							<view class="base-info">
								<view>巡查人：{{ detailObj.patrolUser }}</view>
								<view class="report-content">
									<view class="first-child">巡查内容：</view>
									<view>{{ item.reportContent || '-' }}</view>
								</view>
							</view>
							<uni-forms border label-width="16rem">
								<uni-forms-item label="上传照片">
									<view class="input-txt input-image" v-if="item.reportImgUrl">
										<image v-for="(i, index) in calcArr(item.reportImgUrl)" :key="index" :src="i" mode="widthFix" @click="previewImage(calcArr(item.reportImgUrl), index)"></image>
									</view>
									<view v-else>-</view>
								</uni-forms-item>
							</uni-forms>
						</view>
						<view class="cx-item-bd" v-else>
							<view class="base-info">
								<view>巡查人：{{ detailObj.patrolUser }}</view>
								<view class="report-content">
									<view class="first-child">巡查内容：</view>
									<view>{{ item.caseManageDO.dealRemark || '-' }}</view>
								</view>
							</view>

							<view v-if="item.caseManageDO && item.caseManageDO.id && !item.isShow" class="section">
								<image src="/static/images/base.png" mode="widthFix"></image>
								<text>上报案卷</text>
							</view>
							<uni-forms v-if="item.caseManageDO && item.caseManageDO.id && !item.isShow" border label-width="16rem">
								<uni-forms-item label="病害部位">
									<view class="input-txt">{{ item.caseManageDO.diseaseLocationName || '-' }}</view>
								</uni-forms-item>
								<uni-forms-item label="病害构件">
									<view class="input-txt">{{ item.caseManageDO.brokenCommpontName || '-' }}</view>
								</uni-forms-item>
								<uni-forms-item label="详细地址">
									<view class="input-txt">{{ item.caseManageDO.location || '-' }}</view>
								</uni-forms-item>
								<uni-forms-item label="病害类型">
									<view class="input-txt">{{ item.caseManageDO.brokenTypeName || '' }}</view>
								</uni-forms-item>
								<uni-forms-item label="病害等级">
									<view class="input-txt">{{ calcName(brokenLevelTxt, item.caseManageDO.brokenLevel) }}</view>
								</uni-forms-item>
								<uni-forms-item label="病害等级">
									<view class="input-txt">{{ calcName(dealMsgTxt, item.caseManageDO.dealMsg) }}</view>
								</uni-forms-item>
								<uni-forms-item label="病害描述">
									<view class="input-txt input-txt-lg">{{ item.caseManageDO.brokenDesc }}</view>
								</uni-forms-item>
								<uni-forms-item label="上传照片">
									<view class="input-txt input-image" v-if="item.caseManageDO && item.caseManageDO.brokenImg">
										<image
											:src="i"
											v-for="(i, index) in calcArr(item.caseManageDO&&item.caseManageDO.brokenImg)"
											:key="index"
											mode="widthFix"
											@click="previewImage(calcArr(item.caseManageDO&&item.caseManageDO.brokenImg), index)"
										></image>
									</view>
									<view v-else>-</view>
								</uni-forms-item>
							</uni-forms>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import { getPatrolRecordDetailApi } from '@/api/system/changxiao.js';
import moment from 'moment';
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			list: 20,
			detailId: '',
			dealMsgTxt: [{ name: '日常养护', value: '1' }, { name: '人工监测', value: '2' }, { name: '自动化监测', value: '3' }, { name: '大中修项目', value: '4' }],
			brokenLevelTxt: [{ name: '无', value: '1' }, { name: '轻', value: '2' }, { name: '中', value: '3' }, { name: '重', value: '4' }, { name: '紧急重', value: '5' }],
			detailObj: {},
      taskName:''
		};
	},
	computed: {
		baseFontSize() {
			return this.$store.getters.fontSize;
		}
	},
	onLoad(e) {
		console.log(e);
		if (e && e.id) {
			this.detailId = e.id;
			this.taskName = e.name;
			this.getDetail();
		}
	},
	methods: {
		calcArr(str) {
			if (!str) {
				return [];
			} else {
				return str.split(',');
			}
		},
		previewImage(photoImg, index) {
			uni.previewImage({
				current: index,
				urls: photoImg
			});
		},
		calcName(arr, item) {
			return arr.find(aitem => aitem.value === (item || '0'))?.name;
		},
		timeTranfer(date) {
      console.log('%c [ date ]-155', 'font-size:13px; background:pink; color:#bf2c9f;', date)
			return moment(date).format('YYYY-MM-DD HH:mm:ss');
		},
		getDetail() {
			getPatrolRecordDetailApi({
				id: this.detailId
			}).then(res => {
				this.detailObj = res.data;
			});
		},
		downCallback() {
			this.mescroll.resetUpScroll();
		},
		upCallback() {
			// this.getProductList();
		},
		handleShow(item) {
			this.detailObj.patrolTaskReportRespVO = this.detailObj.patrolTaskReportRespVO.map(pitem => {
				if (item.id === pitem.id) {
					pitem.isShow = !item.isShow;
				} else {
					// pitem.isShow = false
				}
				return {
					...pitem
				};
			});
			this.$forceUpdate();
			console.log('%c [ this.detailObj.patrolTaskReportRespVO ]-150', 'font-size:13px; background:pink; color:#bf2c9f;', this.detailObj.patrolTaskReportRespVO);
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/static/scss/form.scss';
@import './index.scss';
.u-page {
	background: #fff;
	height: 100vh;
}
.bd {
	height: 2upx;
	background: #f0f1f4;
	margin: 0 32upx;
}

.xc-item {
	font-size: 2.4rem;
	color: #999;
	border-bottom: 2upx solid #f0f1f4;
	.cx-item-hd {
		color: #333;
		padding: 22upx 0;
		.icon {
			width: 3rem;
			color: #ccc;
			font-size: 4rem;
			transition: color 0.25s;
			position: relative;
		}

		.state {
			//   width: 160upx;
			padding: 0 5upx;
			height: 48upx;
			border: 2upx solid #597ef7;
			border-radius: 8upx;
			color: #597ef7;
			text-align: center;
			line-height: 44upx;
			&.state-red {
				border-color: #f07868;
				color: #fff;
				background: #f07868;
			}
		}
	}
	.base-info {
		padding-left: 36upx;
		line-height: 44upx;
		view + view {
			margin-top: 8upx;
		}
	}
}
.input-image image {
	width: 120upx;
	margin: 10rpx;
}
.report-content {
	display: flex;
	align-items: top;
	.first-child {
		width: 12rem;
		white-space: nowrap;
	}
	view {
		margin-top: 0 !important;
	}
}
</style>
